<template>
  <div class="activityInfo">
    <div class="box">
      <div class="title">
        <span>活动主题:</span
        ><el-input
          v-model="dataObj.activity_name"
          placeholder="请输入内容"
        ></el-input>
        <span class="star">*</span>
      </div>
      <div class="base">
        <div class="left">
          <img
            :src="`${
              dataObj.activity_subject_image ||
              'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1820939238,2677153117&fm=26&gp=0.jpg'
            }`"
            alt=""
          />
        </div>
        <div class="right">
          <ul>
            <li>
              <div class="left">所属俱乐部:</div>
              <div class="right">
                <el-select
                  v-model="dataObj.club_id"
                  filterable
                  placeholder="请选择所属俱乐部"
                  @change="changeClub"
                >
                  <el-option
                    v-for="item in clubArr"
                    :key="item.id"
                    :label="item.clubName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <span class="star">*</span>
              </div>
            </li>
            <li>
              <div class="left">活动开始时间:</div>
              <div class="right">
                <el-date-picker
                  v-model="dataObj.start_time"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
                <span class="star">*</span>
              </div>
            </li>
            <li>
              <div class="left">活动网络宣传图:</div>
              <div class="right">
                <el-input
                  v-model="dataObj.activity_subject_image"
                  placeholder="请输入图片网络地址"
                ></el-input>
              </div>
            </li>
            <li>
              <div class="left">活动地址:</div>
              <div class="right">
                <el-input
                  v-model="dataObj.activity_address"
                  placeholder="请输入活动地址"
                ></el-input>
                <span class="star">*</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <ul>
        <li>
          <div class="grid">
            <div class="left">活动联系人:</div>
            <div class="right">
              <el-select
                v-model="dataObj.create_user_id"
                filterable
                placeholder="请选择创建人"
                @change="changeUser"
              >
                <el-option
                  v-for="item in yonghuArr"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="grid">
            <div class="left"></div>
            <div class="right"></div>
          </div>
        </li>
        <li>
          <div class="grid">
            <div class="left">报名开始时间:</div>
            <div class="right">
              <el-date-picker
                v-model="dataObj.sign_start_time"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
              <span class="star">*</span>
            </div>
          </div>
          <div class="grid">
            <div class="left">报名截止时间:</div>
            <div class="right">
              <el-date-picker
                v-model="dataObj.sign_end_time"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
              <span class="star">*</span>
            </div>
          </div>
        </li>
        <li>
          <div class="grid">
            <div class="left">预算:</div>
            <div class="right">
              <el-input
                v-model="dataObj.activity_budget"
                placeholder="请输入预算"
              ></el-input>
            </div>
          </div>
          <div class="grid">
            <div class="left">实际费用:</div>
            <div class="right">
              <el-input
                v-model="dataObj.activity_cost"
                placeholder="请输入实际费用"
              ></el-input>
            </div>
          </div>
        </li>
        
        <li>
          <div class="grid">
            <div class="left">活动口号:</div>
            <div class="right">
              <el-input
                v-model="dataObj.activity_slogan"
                placeholder="请输入活动口号"
              ></el-input>
            </div>
          </div>
          <div class="grid">
            <div class="left">活动备注:</div>
            <div class="right">
              <el-input
                v-model="dataObj.activity_note"
                placeholder="请输入活动备注"
              ></el-input>
            </div>
          </div>
        </li>
        <li class="personNum">
          <div class="left">活动参与者:</div>
          <div class="right">
            <el-select
              v-model="dataObj.activity_persons_id"
              filterable
              multiple
              placeholder="请选择参与者"
            >
              <el-option
                v-for="item in yonghuArr"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </li>
        <li class="personNum">
          <div class="left">活动内容:</div>
          <div class="right">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              v-model="dataObj.activity_content"
              placeholder="请输入内容,纯文字"
            ></el-input>
            <span class="star">*</span>
          </div>
        </li>
      </ul>
      <div style="padding: 30px 50px; text-align: center">
        <el-button @click="$router.go(-1)" style="width: 120px; padding: 10px">取消</el-button>
        <el-button
          type="primary"
          style="width: 120px; padding: 10px; margin-left: 20px"
          @click="doActivity()"
          >确认</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { getYonghuByClub, addActivity, getClubList,getClubinfoByUser } from "@/api/api";
export default {
  data() {
    return {
      dataObj: {
        activity_name: "",
        club_id:"",
        club_name:"",
        club_image:"",
        start_time: "",
        end_time: "",
        activity_address: "",
        activity_slogan: "",
        activity_note: "",
        activity_subject_image: "",
        create_user_id: "",
        create_user_name: "",
        create_time: new Date().Format("yyyy-MM-dd hh:mm:ss"),
        sign_start_time: "",
        sign_end_time: "",
        activity_budget: "",
        activity_cost: "",
        activity_persons_id: "",
        activity_persons_name: [],
        activity_content: "",
      },
      yonghuArr: [],
      clubArr: [],
    };
  },
  mounted() {
    this.getClubArr();
  },
  methods: {
    changeUser(id){
      let list = this.yonghuArr.filter(item=>{
        return item.id === id;
      })
      this.dataObj.create_user_name = list[0].username;
    },
    changeClub(id){
      this.dataObj.activity_persons_id = "";
      this.dataObj.create_user_id = "";
      console.log(this.clubArr)
      console.log(id)
      let list = this.clubArr.filter(item=>{
        return item.id === id;
      })
      console.log(list)
      this.dataObj.club_name = list[0].clubName;
      this.dataObj.club_image = list[0].clubImage
      getYonghuByClub({clubId:id}).then((res) => {
        if(res.code == 0){
          let arr = res.data;
          arr.forEach((item,index)=>{
            arr[index]["username"] = item.userName
          })
          this.yonghuArr = arr;
        }
      });
    },
    getClubArr() {
      getClubinfoByUser().then((res) => {
        this.clubArr = res.data;
      });
    },
    doActivity() {
      let obj = JSON.parse(JSON.stringify(this.dataObj));
      if (this.getError(obj)) {
        return;
      }

      obj.activity_persons_name = [];
      this.yonghuArr.forEach((item) => {
        if (obj.activity_persons_id.includes(item.id)) {
          obj.activity_persons_name.push(item.username);
        }
      });
      console.log("tag", obj);
      obj.activity_subject_image =
        obj.activity_subject_image || obj.club_image;
      
      addActivity(obj).then((res) => {
        if(res.code == 0){
          this.$message.success(res.msg)
        }
        else{
          this.$message.error(res.msg)
        }
      });
    },
    getError(obj) {
      let error = false;
      if (!obj.activity_name) {
        this.$message.error("活动主题不能为空");
        return true;
      }
      if (!obj.club_id) {
        this.$message.error("所属俱乐部不能为空");
        return true;
      }
      if (!obj.start_time) {
        this.$message.error("活动开始时间不能为空");
        return true;
      }
      if (!obj.activity_address) {
        this.$message.error("活动地址不能为空");
        return true;
      }
      if (!obj.sign_start_time) {
        this.$message.error("报名开始时间不能为空");
        return true;
      }
      if (!obj.sign_end_time) {
        this.$message.error("报名截止时间不能为空");
        return true;
      }
      if (!obj.activity_content) {
        this.$message.error("活动内容不能为空");
        return true;
      }
    },
    
  },
};
</script>
<style lang="stylus">
.activityInfo {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url('../../assets/login_bg.svg');

  .el-date-editor {
    width: 100%;
  }

  .star {
    color: red;
    // margin-left:15px !important;
    position: absolute;
    right: -15px;
    height: 40px;
    line-height: 40px;
    font-weight: bolder;
  }

  .el-select, .el-input {
    width: 100%;
  }
}
</style>
<style lang="stylus" scoped>
.activityInfo {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;

  * {
    padding: 0;
    margin: 0;
  }

  .box {
    min-width: 700px;
    max-width: 1100px;

    .title {
      text-align: center;
      font-size: 15px;
      padding: 20px 0;
      display: flex;
      align-items: center;
      position: relative;

      >span {
        flex-basis: 125px;
      }
    }

    .base {
      display: flex;
      margin-bottom: 20px;
      padding: 20px 0 20px 50px;
      border-top: 1px solid #e9e9e9;
      border-bottom: 1px solid #e9e9e9;

      >.right {
        flex: 1;
        position: relative;

        ul li {
          list-style: none;
          display: flex;
          padding: 5px 20px;
          align-items: center;
          font-size: 15px;
          // margin-bottom: 10px;
        }

        .left {
          flex-basis: 110px;
          text-align: right;
          white-space: nowrap;
          // font-weight bolder
        }

        .right {
          flex: 1;
          padding-left: 15px;
          white-space: nowrap;
        }
      }

      >.left {
        flex-basis: 150px;
        text-align: center;

        img {
          width: 150px;
          height: 150px;
          border-radius: 10px;
        }
      }
    }

    >ul {
      background-color: rgba(255, 255, 255, 0.6);
      border-radius: 10px;
      padding: 20px 0;

      >li {
        list-style: none;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        font-size: 15px;
        // margin-bottom: 10px;

        .grid {
          flex: 1;
          display: flex;
          padding-left: 15px;
        }

        .left {
          flex-basis: 110px;
          white-space: nowrap;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          // font-weight bolder
        }

        .right {
          flex: 1;
          padding-left: 15px;
          position: relative;
        }
      }

      .personNum {
        .right {
          white-space: none !important;
        }
      }
    }
  }
}
</style>
